${template "main_header.html"}

<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:60px;':'margin-top:10px;'">
  <tab-tag v-if="!urlobj.dialogstate"></tab-tag>

  <div style="margin:0 15px 15px 15px;">
    <el-card shadow="never" style="min-height:650px;">
      <div class="btn-group" style="margin-top:10px;margin-bottom:10px;">
        <div>
          <el-button v-for="item in button_group" :key="item.access" v-if="checkPermission(item.access,'','1',[1])" :disabled="$data[item.disabled]" :type="item.color" size="mini" :icon="item.icon" @click="fn(item.clickname)">
            <span v-if="item.batch" v-text="$data['batchUpdateStatus']?'批量保存':'批量编辑'"></span>
            <span v-else v-text="item.name"></span>
          </el-button>
        </div>
        <div><table-tool :search_visible.sync="search_visible" :expand_status="true" :expand="expand" @toggle="toggleRowExpansion" @refesh_list="index"></table-tool></div>
      </div>
      <el-table :row-class-name="rowClass" @selection-change="selection" @row-click="handleRowClick" :tree-props="{children: 'children'}" :default-expand-all="expand" row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading" ref="multipleTable" border class="eltable" :data="list" style="width: 100%">
        <el-table-column align="center" type="selection" width="42"></el-table-column>
        <el-table-column align="center" type='' property="id" label="编号" show-overflow-tooltip width="70">
        </el-table-column>
        <el-table-column align="left" property="name" label="名称" show-overflow-tooltip width="">
        </el-table-column>
        <!-- <el-table-column align="center" property="type" label="类型" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.type == '1'" size="mini" effect="dark">菜单</el-tag>
            <el-tag type="warning" v-if="scope.row.type == '2'" size="mini" effect="dark">方法</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" property="path" label="节点路径" show-overflow-tooltip width="">
        </el-table-column> -->
        <el-table-column align="center" property="status" label="状态" show-overflow-tooltip width="90">
          <template slot-scope="scope">
            <el-switch @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" property="icon" label="图标" show-overflow-tooltip width="">
        </el-table-column> -->
        <el-table-column align="center" property="sort" label="排序" show-overflow-tooltip width="90">
          <template class="sort" slot-scope="scope">
            <el-input @blur.stop="updateExt(scope.row,'sort')" size="mini" placeholder="排序" v-model="scope.row.sort"></el-input>
          </template>
        </el-table-column>
        <el-table-column :fixed="ismobile()?false:'right'" label="操作" align="center" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.id">
              <el-button v-if="checkPermission('/admin/org/update.html','','1',[1])" size="mini" icon="el-icon-edit" type="primary" @click="update(scope.row)">修改</el-button>
              <el-button v-if="checkPermission('/admin/org/delete.html','','1',[1])" size="mini" icon="el-icon-delete" type="danger" @click="del(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
    </el-card>

    <!--添加-->
    <Add :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
    <!--修改-->
    <Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>

  </div>

</div>

<script src="/assets/js/app.js"></script>
<script src="/assets/libs/treeselect/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="/assets/libs/treeselect/vue-treeselect.min.css">
<script src="/assets/admin/org/add.js?v=3034"></script>
<script src="/assets/admin/org/update.js?v=5774"></script>
<script>
  new Vue({
    el: '#app',
    components: {
      'treeselect': VueTreeselect.Treeselect,
    },
    data: function() {
      return {
        dialog: {
          addDialogStatus: false,
          updateDialogStatus: false,
        },
        searchData: {},
        button_group: [{
            name: '添加',
            color: 'success',
            access: '/admin/org/add.html',
            icon: 'el-icon-plus',
            disabled: '',
            clickname: 'add'
          },
          {
            name: '修改',
            color: 'primary',
            access: '/admin/org/update.html',
            icon: 'el-icon-edit',
            disabled: 'single',
            clickname: 'update'
          },
          {
            name: '删除',
            color: 'danger',
            access: '/admin/org/delete.html',
            icon: 'el-icon-delete',
            disabled: 'multiple',
            clickname: 'del'
          },
        ],
        loading: false,
        page_data: {
          limit: 200,
          page: 1,
          total: 20,
        },
        ids: [],
        single: true,
        multiple: true,
        search_visible: true,
        expand: true,
        list: [],
        updateInfo: {},
      }
    },
    methods: {
      index() {
        let param = {
          limit: this.page_data.limit,
          page: this.page_data.page
        }
        Object.assign(param, this.searchData)
        this.loading = true
        axios.post('/admin/org/index.html', param).then(res => {
          if (res.data.status == 200) {
            this.list = res.data.data.data
            this.page_data.total = res.data.data.total
            this.loading = false
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      updateExt(row, field) {
        if (row.id) {
          axios.post('/admin/org/updateExt', {
            id: row.id,
            [field]: parseInt(row[field])
          }).then(res => {
            if (res.data.status == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      },
      add() {
        this.dialog.addDialogStatus = true
      },
      update(row) {
        let id = row.id ? row.id : this.ids.join(',')
        axios.post('/admin/org/getUpdateInfo', {
          id: id
        }).then(res => {
          if (res.data.status == 200) {
            this.dialog.updateDialogStatus = true
            this.updateInfo = res.data.data
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      del(row) {
        this.$confirm('确定操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = row.id ? row.id : this.ids.join(',')
          axios.post('/admin/org/delete', {
            id: ids
          }).then(res => {
            if (res.data.status == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
              this.index()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {})
      },
      selection(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      handleRowClick(row, rowIndex, event) {
        if (event.target.className !== 'el-input__inner') {
          this.$refs.multipleTable.toggleRowSelection(row)
        }
      },
      rowClass({
        row,
        rowIndex
      }) {
        for (let i = 0; i < this.ids.length; i++) {
          if (row.id === this.ids[i]) {
            return 'rowLight'
          }
        }
      },
      toggleRowExpansion() {
        this.expand = !this.expand
        this.list.forEach(item => {
          this.$refs.multipleTable.toggleRowExpansion(item, this.expand)
        })
      },
      /** 转换菜单数据结构 */
      normalizer(org) {
        if (org.children && !org.children.length) {
          delete org.children
        }
        return {
          id: org.val,
          label: org.key,
          children: org.children
        }
      },
      fn(method) {
        this[method](this.ids)
      },
    },
    mounted() {
      this.index()
    },
  })
</script>
${template "main_footer.html"}